/**
 * This shows an example of a common shopping cart checkout form. It demonstrates uses
 * of FieldContainer and various layouts for arranging and aligning fields, ComboBox
 * fields for state and month selection, and listening to change events to automatically
 * copy values from Mailing Address to Billing Address fields.
 */
Ext.require(['Ext.grid.*',
    'Ext.layout.container.HBox',
    'Ext.layout.container.VBox'
]);

Ext.define('ModeloMateriasCursar', {
    extend : 'Ext.data.Model',
    fields : [{
        type : 'string',
        name : 'codigo'
    },{
        type : 'string',
        name : 'nombre'
    },{
        type : 'string',
        name : 'trayecto'
    },{
        type : 'string',
        name : 'periodo'
    },{
        type : 'string',
        name : 'calificacion'
    },{
        type : 'string',
        name : 'creditos'
    }]
});

Ext.define('ModeloMaterias', {
    extend : 'Ext.data.Model',
    fields : [{
        type : 'string',
        name : 'codigo'
    },{
        type : 'string',
        name : 'nombre'
    },{
        type : 'string',
        name : 'trayecto'
    },{
        type : 'string',
        name : 'periodo'
    },{
        type : 'string',
        name : 'seccion'
    },{
        type : 'string',
        name : 'turno'
    },{
        type : 'string',
        name : 'creditos'
    }]
});

Ext.define('ModeloSeccion', {
    extend : 'Ext.data.Model',
    fields : [{
        type : 'string',
        name : 'seccion'
    },{
        type : 'string',
        name : 'turno'
    }]
});

Ext.define('ModeloHorario', {
    extend : 'Ext.data.Model',
    fields : [{
        type : 'string',
        name : 'lunes'
    },{
        type : 'string',
        name : 'martes'
    },{
        type : 'string',
        name : 'miercoles'
    },{
        type : 'string',
        name : 'jueves'
    },{
        type : 'string',
        name : 'viernes'
    },{
        type : 'string',
        name : 'sabado'
    },{
        type : 'string',
        name : 'domingo'
    }]
});

var storeMateriasCursar = Ext.create('Ext.data.Store', {
    model : 'ModeloMateriasCursar',
    data : [{
        codigo : 'Rec 0', 
        nombre : 'Rec 0', 
        trayecto : '0', 
        periodo : '0', 
        calificacion : '06', 
        creditos : '0'
    }, {
        codigo : 'Rec 0',
        nombre : 'Rec 0',
        trayecto : '0', 
        periodo : '0', 
        calificacion : '10', 
        creditos : '0'
    }, {
        codigo : 'Rec 0', 
        nombre : 'Rec 0', 
        trayecto : '0', 
        periodo : '0', 
        calificacion : '02', 
        creditos : '0'
    }, {
        codigo : 'Rec 0', 
        nombre : 'Rec 0', 
        trayecto : '0', 
        periodo : '0', 
        calificacion : '-', 
        creditos : '0'
    }, {
        codigo : 'Rec 0', 
        nombre : 'Rec 0', 
        trayecto : '0', 
        periodo : '0', 
        calificacion : '-', 
        creditos : '0'
    }]
});

var storeMateriasInscritas = Ext.create('Ext.data.Store', {
    model : 'ModeloMaterias',
    data : [{
        codigo : 'Rec 0', 
        nombre : 'Rec 0', 
        trayecto : '0', 
        periodo : '0', 
        seccion : 'HS2342',
        turno : 'Mañana',
        creditos : '0'
    }, {
        codigo : 'Rec 0', 
        nombre : 'Rec 0', 
        trayecto : '0', 
        periodo : '0', 
            seccion : 'HS2234',
        turno : 'Tarde',
        creditos : '0'
    }]
});

var storeSeccion = Ext.create('Ext.data.Store', {
    model : 'ModeloSeccion',
    data : [{
        seccion : 'HI2122', turno : 'Mañana'
    }, {
        seccion : 'HI1222', turno : 'Tarde'
    }]
});

var storeHorario = Ext.create('Ext.data.Store', {
    model : 'ModeloHorario',
    data : [{
        lunes : 'Rec 0', 
        martes : 'Rec 0', 
        miercoles : '0', 
        jueves : '0', 
        viernes : '06', 
        sabado : '0', 
        domingo : 'x'
    }, {
        lunes : 'Rec 0', 
        martes : 'Rec 0', 
        miercoles : '0', 
        jueves : '0', 
        viernes : '06', 
        sabado : '0', 
        domingo : 'x'
    }, {
        lunes : 'Rec 0', 
        martes : 'Rec 0', 
        miercoles : '0', 
        jueves : '0', 
        viernes : '06', 
        sabado : '0', 
        domingo : 'x'
    }, {
        lunes : 'Rec 0', 
        martes : 'Rec 0', 
        miercoles : '0', 
        jueves : '0', 
        viernes : '06', 
        sabado : '0', 
        domingo : 'x'
    }, {
        lunes : 'Rec 0', 
        martes : 'Rec 0', 
        miercoles : '0', 
        jueves : '0', 
        viernes : '06', 
        sabado : '0', 
        domingo : 'x'
    }]
});

var columnsMateriasCursar = [{
    text : "Código",
    sortable : true,
    dataIndex : 'codigo',
    flex : 1,
},{
    text : "Nombre",
    sortable : true,
    dataIndex : 'nombre',
    flex : 6,
}, {
    text : "Trayecto",
    sortable : true,
    dataIndex : 'trayecto',
    flex : 1,
},{
    text : "Periodo",
    sortable : true,
    dataIndex : 'periodo',
    flex : 1,
},{
    text : "Calificación",
    sortable : true,
    dataIndex : 'calificacion',
    flex : 1,
},{
    text : "# U. Creditos",
    sortable : true,
    dataIndex : 'creditos',
    flex : 1,
}];

var columnsMaterias = [{
    text : "Código",
    sortable : true,
    dataIndex : 'codigo',
    flex : 1,
},{
    text : "Nombre",
    sortable : true,
    dataIndex : 'nombre',
    flex : 6,
}, {
    text : "Trayecto",
    sortable : true,
    dataIndex : 'trayecto',
    flex : 1,
},{
    text : "Periodo",
    sortable : true,
    dataIndex : 'periodo',
    flex : 1,
},{
    text : "# U. Creditos",
    sortable : true,
    dataIndex : 'creditos',
    flex : 1,
},{
    text : "Sección",
    sortable : true,
    dataIndex : 'seccion',
    flex : 1,
},{
    text : "Turno",
    sortable : true,
    dataIndex : 'turno',
    flex : 1,
}];

var columnsSecciones = [{
    text : "Seccion",
    flex : 5,
    sortable : true,
    dataIndex : 'seccion'
}, {
    text : "Turno",
    flex : 5,
    sortable : true,
    dataIndex : 'turno'
}];

var columnsHorario = [{
    text : "Código",
    sortable : true,
    dataIndex : 'codigo',
    flex : 1,
},{
    text : "lun",
    sortable : true,
    dataIndex : 'lunes',
    flex : 1,
}, {
    text : "mar",
    sortable : true,
    dataIndex : 'martes',
    flex : 1,
},{
    text : "mie",
    sortable : true,
    dataIndex : 'miercoles',
    flex : 1,
},{
    text : "jue",
    sortable : true,
    dataIndex : 'jueves',
    flex : 1,
},{
    text : "vie",
    sortable : true,
    dataIndex : 'viernes',
    flex : 1,
},{
    text : "sab",
    sortable : true,
    dataIndex : 'sabado',
    flex : 1,
},{
    text : "dom",
    sortable : true,
    dataIndex : 'domingo',
    flex : 1,
}];

var fieldsetDetallesMateria = Ext.create('Ext.form.FieldSet', {
    title: 'Materia Seleccionada',
    defaultType: 'textfield',
    layout: 'anchor',
    margin: '0 0 0 2',
    height: 180,
    flex: 5,
    defaults: {
        anchor: '100%',
        margin: '4 0 4 0',
        labelWidth: 55,
    },
    items: [{
        xtype: 'fieldcontainer',
        fieldLabel: 'Materia',
        layout: 'hbox',
        cls: 'colorize',
        combineErrors: true,
        defaultType: 'textfield',
        defaults: {
            hideLabel: 'true',
            margin: '1 0 1 0',
            width: '100%',
            height: 20,
        },
        items: [{
            name: 'materia',
            emptyText: 'Nombre de la materia',
            allowBlank: false,
            disabled: true
        }]
    },{
        xtype: 'container',
        layout: 'hbox',
        defaultType: 'textfield',
        defaults: {
            labelAlign: 'right',
            margin: '1 0 1 0',
            labelWidth: 55,
        },
        items: [{
            labelAlign: 'left',
            fieldLabel: 'Trayecto',
            name: 'trayecto',
            vtype: 'trayecto',
            flex: 1,
            disabled: true,
        },{
            fieldLabel: 'Turno',
            name: 'turno',
            vtype: 'turno',
            flex: 1,
            disabled: true
        }]
    },{
        xtype: 'container',
        layout: 'hbox',
        defaultType: 'textfield',
        defaults: {
            labelAlign: 'right',
            margin: '1 0 1 0',
            labelWidth: 55,
        },
        items: [{
            labelAlign: 'left',
            fieldLabel: 'Periodo',
            name: 'periodo',
            vtype: 'periodo',
            flex: 1,
            disabled: true
        },{
            fieldLabel: 'Nº Unid. Creditos',
            name: 'creditos',
            vtype: 'creditos',
            flex: 1,
            disabled: true
        }]
    },{
        xtype: 'fieldcontainer',
        fieldLabel: 'Nota',
        layout: 'vbox',
        combineErrors: true,
        defaultType: 'textfield',
        defaults: {
            hideLabel: 'true',
            width: '100%',
            height: 60,
        },
        items: [{
            xtype: 'textarea',
            hideLabel: true,
            name: 'nota',
            flex: 1,
            disabled: true
        }]
    }
]
});


var buttonRetirarMaterias = Ext.create('Ext.Container', {
    requires: [
        'Ext.layout.container.Center'
    ],
    xtype: 'layout-center',
    flex: 2,
    layout: {
        type: 'table',
        columns: 1,
    },
    items: [{
        xtype: 'button',
        iconCls: 'icon-delete',
        text: 'Eliminar Unidad Curricular',
        scale: 'medium',
        margin: '10 0 10 0',
    },{
        xtype: 'button',
        iconCls: 'icon-reset',
        text: 'Cancelar Inscripción',
        scale: 'medium',
        margin: '10 0 10 0',
    }]
});

var gridHorario = Ext.create('Ext.grid.Panel', {
    store : storeHorario,
    columns : columnsHorario,
    stripeRows : true,
    title : 'Horario',
    margins : '0 2 0 0',
    flex: 5,
});

var gridMateriasCursar = Ext.create('Ext.grid.Panel', {
    store : storeMateriasCursar,
    columns : columnsMateriasCursar,
    stripeRows : true,
    title : 'Materias a Cursar',
    margins : '0 2 0 0',
    flex: 9,
});

var gridSecciones = Ext.create('Ext.grid.Panel', {
    store : storeSeccion,
    columns : columnsSecciones,
    stripeRows : true,
    title : 'Secciones Disponibles',
    margins : '0 2 0 0',
    flex: 1,
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        layout: {
            pack: 'center'
        },
        items: [{
            minWidth: 80,
            iconCls: 'icon-add',
            text: 'Inscribir',
            scale: 'medium',
            margin: '1 1 1 1',
        }]
    }]
});

var gridMateriasInscritas = Ext.create('Ext.grid.Panel', {
    multiSelect : true,
    store : storeMateriasInscritas,
    columns : columnsMaterias,
    stripeRows : true,
    title : 'Materias Inscritas',
    margins : '0 2 0 0',
    flex: 10,
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        ui: 'footer',
        layout: {
            pack: 'center'
        },
        items: [{
            iconCls: 'icon-delete',
            text: 'Eliminar Unidad Curricular',
            scale: 'medium',
            margin: '2 2 1 2',
        },{
            iconCls: 'icon-reset',
            text: 'Cancelar Inscripción',
            scale: 'medium',
            margin: '2 2 1 2',
        },{
            iconCls: 'icon-save',
            text: 'Imprimir Planilla',
            scale: 'medium',
            margin: '2 2 1 2',
        }]
    }]
});

Ext.define('UptaebFrontEnd.view.inscripcion.vInscripcion', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.inscripcion',
    xtype: 'form-inscripcion',
    frame: true,

    initComponent: function(){
        Ext.apply(this, {
        fieldDefaults: {
            labelAlign: 'right',
            labelWidth: 80,
        },
        items: [{
            xtype: 'tabpanel',
            reference: 'tabpanel',
            border: false,
            defaults: {
                bodyPadding: 10,
                autoScroll: true,
                border: false
            },
            items: [{
                title: 'Inscripción',
                icon: null,
                glyph: 42,
                xtype: 'container',
                cls: 'colorize',
                combineErrors: true,
                items: [{
                    title: 'Inscripción',
                    icon: null,
                    glyph: 42,
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        pack: 'start',
                        align: 'stretch'
                    },
                    cls: 'colorize',
                    combineErrors: true,
                    items: [gridMateriasCursar, gridSecciones]
                },{
                    xtype: 'container',
                    fieldLabel: 'SSS',
                    layout: {
                        type: 'hbox',
                        pack: 'start',
                        align: 'stretch'
                    },
                    combineErrors: true,
                    items: [fieldsetDetallesMateria, gridHorario]
                },{
                    title: 'Inscripción',
                    icon: null,
                    glyph: 42,
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        pack: 'start',
                        align: 'stretch'
                    },
                    cls: 'colorize',
                    combineErrors: true,
                    items: [gridMateriasInscritas]
                }]
            }, {
                title: 'Ver Horarios',
                iconCls: 'icon-grid',
                glyph: 70,
            }]
        }],
//        buttons: [{
//            text: 'Imprimir Planilla',
//            width: 150,
//            scope: this,
//            handler: this.onCompleteClick
//        }]
        });
    this.callParent();
    },
    
    onResetClick: function(){
        this.getForm().reset();
    },

    onCompleteClick: function(){
        var form = this.getForm();
        if (form.isValid()) {
            Ext.MessageBox.alert('Submitted Values', form.getValues(true));
        }
    },

    onMailingAddrFieldChange: function(field){
        var copyToBilling = this.down('[name=billingSameAsMailing]').getValue(),
            copyField = this.down('[name=' + field.billingFieldName + ']');

        if (copyToBilling) {
            copyField.setValue(field.getValue());
        } else {
            copyField.clearInvalid();
        }
    },

});